<template>
	<view class="bg-danger flex flex-column pt-2" :style="'padding-bottom:' + fixedHeight + 'px'">
		<!-- 选项 -->
		<view v-if="SalesOrder.length==1">
			<view class="flex mx-4">
				<view @click="handlecount(0)" class="rounded-lg flex justify-center w-100 py-2"
					:class="count == 0 ? 'bg-info' : 'bg-white'" style="border-radius: 14rpx 0 0 0">
					<text class="font font-weight-bold" :class="count == 0 ? 'text-white' : 'text-info'">配送地址</text>
				</view>
				<view @click="handlecount(1)" class="flex justify-center w-100 py-2"
					:class="count == 1 ? 'bg-info' : 'bg-white'" style="border-radius: 0 14rpx 0 0">
					<text class="font" :class="count == 1 ? 'text-white' : 'text-info'">用户自提</text>
				</view>
			</view>
			<!-- 收货地址 --><!-- 用户自提 -->
			<view v-if="count == 1" class="flex flex-column bg-white mx-4 px-3 pt-3 pb-1">	
				<!-- 门店地址 -->
				<view>
					<text class="font text-ellipsis-2 font-weight-bold">黑龙江省哈尔滨市香坊区木材东街河畔花园2号楼2单元2303</text>
				</view>
				<!-- 用户预留信息 -->
				<view class="flex align-end mt-3">
					<view class="flex flex-column border-right border-muted pr-3">	
						<text class="font-sm text-muted">联系人</text>
						<view>
							<text class="font-sm">袁丙超</text>
						</view>
					</view>
					<view class="flex flex-column px-3">
						<text class="font-sm text-muted">预留电话</text>
						<view>
							<text class="font-sm">15046006120</text>
						</view>
					</view>
					<view class="flex-shrink" style="width: 40rpx;">
						<image :src="Domain_ICON + '/edit.png'" style="width: 40rpx; height: 40rpx" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 配置地址未选择 -->
			<view v-else-if="Address == null" @click="onAddress()"
				class="bg-white mx-4 px-2 py-3 flex align-center" style="position: relative">
				<text class="font-sm">请选择收货地址</text>
				<text class="font" style="position: absolute; right: 20rpx">&gt;</text>
			</view>
			<!-- 配送地址 -->
			<view v-else @click="onAddress()" class="bg-white mx-4 p-3">
				<view class="flex align-center">
					<image :src="Domain_ICON + '/position.png'" class="rounded-circle bg-info" style="width: 30rpx; height: 30rpx" mode=""></image>
					<text class="font ml-1">{{ Address.Name }}</text>
					<text class="font ml-1">{{ Address.Phone }}</text>
				</view>
				<view class="pl-4">
					<text class="font-sm">配送地址：{{ Address.Address }}</text>
				</view>
			</view>
		</view>
		<!-- 支持多地址下单 -->
		<view @click="handleDelivery()" class="bg-white mx-4 mb-4 px-3 py-2 flex justify-between align-center font" :class="SalesOrder.length==1?'rounded-bottom-lg':'rounded-lg'">
			<view class="flex align-center justify-center">
				<image :src="Domain_ICON + '/add.png'" mode="scaleToFill" style="width: 30rpx; height: 30rpx;" />
				<view class="ml-2 font">支持选择多个收货地址</view>
			</view>
		   <view class="flex align-center font">去修改 <uni-icons type="right" size="15"></uni-icons> </view>
		</view>
		<!-- 商品种类 -->
		<view class="bg-white mx-4 mb-4 px-2 py-3 rounded-lg" v-for="(item, index) in SalesOrder" :key="index">
			<view @click="onAddress()" v-if="SalesOrder.length>1" class="bg-light mb-2 p-3 rounded-lg">
				<view class="flex align-center">
					<image :src="Domain_ICON + '/position.png'" class="rounded-circle bg-info"
						style="width: 30rpx; height: 30rpx" mode=""></image>
					<text class="font ml-1">{{ item.AddressData.Name }}</text>
					<text class="font ml-1">{{ item.AddressData.Phone }}</text>
				</view>
				<view class="pl-4">
					<text class="font-sm">配送地址：{{ item.AddressData.Address }}</text>
				</view>
			</view>
			<view v-for="(item1,index1) in item.GoodsData" :key="index1" class="flex mb-3" style="position: relative">
				<image class="rounded-lg flex-shrink" style="width: 150rpx; height: 150rpx"
					:src="Domain_IMG + item1.Picture_URL" mode=""></image>
				<view class="ml-2 pr-10 text-ellipsis" style="width: 100%; position: relative">
					<text class="font">{{ item1.Article_Name }}</text><br/>
					<text class="font-sm text-muted">规格:{{ item1.Specifications_Name }}</text>
					<text class="font-sm"
						style="position: absolute; bottom: 0; left: 0">￥{{ Price(item1.Sales_Unit_Price) }}</text>
				</view>
				<text class="font-sm" style="position: absolute; right: 0;height: 100%;line-height: 150rpx;">×{{ item1.quantity }}</text>
			</view>
			<view class="bg-light p-3 rounded-lg flex align-center">
				<text class="font flex-shrink">订单留言：</text>
				<textarea v-model="item.message" class="font" placeholder-class="text-muted" style="width: 100%"
					placeholder="请输入你的订单备注信息" auto-height></textarea>
			</view>
		</view>
		<!-- 商品金额 -->
		<view class="mx-4 rounded-lg px-3 p-3 bg-white">
			<text class="font text-muted">商品金额：</text>
			<text class="font" style="display: inline-block; float: right">￥{{ Price(Amount) }}</text>
		</view>
		<!-- 配送金额 -->
		<view v-if="ispay && !count" class="mx-4 flex justify-between align-center mt-2 rounded-lg p-3 bg-white">
			<view class="font text-muted">配送金额：<text class="font-small">(当商品金额到达￥{{ Sales_Amount }}时可免配送费)</text></view>
			<text class="font" style="display: inline-block; float: right">￥{{ Price(DeliveryAmount) }}</text>
		</view>
		<!-- 配送距离 -->
		<view v-if="ispay && !count" class="mx-4 mt-2 rounded-lg p-3 bg-white">
			<text class="font text-muted">当前地址配送距离约：</text>
			<text class="font" style="display: inline-block; float: right">{{ distance }}km</text>
		</view>
		<!-- 底层总计 -->
		<view id="fixed" class="fixed-bottom py-1 bg-white">
			<view class="m-auto flex align-center justify-between" style="width: 90%">
				<view class="" style="width: 100%">
					<text class="font">共{{ Quantity }}件 合计</text><text
						class="font-md font-weight-bold">￥{{ accAdd(Amount, count ? 0 : DeliveryAmount) }}</text>
				</view>
				<view @click="submit()" v-if="ispay || count"
					class="flex-shrink text-white bg-info py-3 text-center rounded-lg" hover-class="bg-hover-info"
					:hover-stay-time="150" style="width: 35%">
					<text class="font">提交订单</text>
				</view>
				<view v-else class="flex-shrink text-white bg-danger py-3 text-center rounded-lg"
					hover-class="bg-hover-info" :hover-stay-time="150" style="width: 35%">
					<text class="font-sm">该地区暂时无法配送</text>
				</view>
			</view>
		</view>
		<showPaynew :amount="accAdd(Amount, count ? 0 : DeliveryAmount)" :sales_order="sales_order"
			:Article_Name="Article_Name" :show="isShow" @Close="handleClose()"></showPaynew>
		<showPaysnew :amount="accAdd(Amount, count ? 0 : DeliveryAmount)" :sales_orders="sales_orders"
			:Article_Name="Article_Name" :show="isShow2" @Close="handleClose()"></showPaysnew>
		<showAddress v-if="isShow3" :SalesOrder1="SalesOrder1" @Close="handleClose('address')" @submit="callback"></showAddress>
		<!-- 用户协议 -->
		<view class="mask" v-if="mask">
			<view class="model_box">
				<view class="mb-tit">用户协议和隐私政策</view>
				<view class="mb-content">
					<view class="mb-con">尊敬的用户您好！</view>
					<view class="mb-con">请您务必认真阅读、充分理解“用户服务协议”和“隐私政策”各条款，包括但不限于为了向您提供数据、分享、统计等服务所要获取的权限信息。</view>
					<view class="mb-con1">
						<navigator class="mb-a" url="/pages/my/privacyPolicy">《用户服务协议》</navigator>
						和
						<navigator class="mb-a" url="/pages/my/privacyPolicy">《隐私政策》</navigator>
					</view>
					<text>请您仔细阅读上方的的用户协议与隐私政策，请点击同意接受我们的服务</text>
				</view>
				<view class="checkbox">
					<view class="qr">
						<navigator class="noUse" target="miniProgram" open-type="exit">暂不使用</navigator>
						<view class="agree" @click="agree">同意</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import showPaynew from "@/components/payment/paynew.vue";
	import showPaysnew from "@/components/payment/paysnew.vue";
	import showAddress from "@/components/address/address.vue";
	import {NowTime} from "@/static/js/DateUtil.js";
	import {accMul,accAdd} from "@/static/js/GeneralUtil.js";
	export default {
		components: {
			showPaynew,
			showPaysnew,
			showAddress
		},
		data() {
			return {
				count: 0, //自提或个人信息
				Domain_IMG: app.globalData.Domain_IMG, //全局变量--域名
				isShow: false, //调起支付方式
				isShow2: false, //调起支付方式
				isShow3:false,//分配地址
				ispay: true,//支付
				payway: true, //选取支付方式
				fixedHeight: 0, //底部悬浮栏高度
				Address: null, //默认地址
				SalesOrder:[{
					message:'',//留言
					AddressData:{
						Address_SerialNumber:"M02000000000012",
						Address: "黑龙江省绥化市海伦市光华路",
						Name:"袁丙超",
						Phone:"15046006120"
					},
					GoodsData:[{
						"Article_SerialNumber":"A00000000000252",
						"Sales_Unit_Price_Stock_SerialNumber":"H01100000008611",
						"Store_SerialNumber":"E00000000000009",
						"Article_Name":"清扬洗发水400克+160克",
						"Picture_URL":"/C_6902088122404_5.jpg",
						"Unit_Price":"",
						"quantity":1,
						"Sign":"无货货主",
						"Specifications_Name":"560g",
						"Sales_Unit_Price":"50.5",
						"Article_Specifications_SerialNumber":"A04000000000280",
					},{
						"Article_SerialNumber":"A00000000000252",
						"Sales_Unit_Price_Stock_SerialNumber":"H01100000008611",
						"Store_SerialNumber":"E00000000000009",
						"Article_Name":"清扬洗发水400克+160克",
						"Picture_URL":"/C_6902088122404_5.jpg",
						"Unit_Price":"",
						"quantity":3,
						"Sign":"无货货主",
						"Specifications_Name":"560g",
						"Sales_Unit_Price":"50.5",
						"Article_Specifications_SerialNumber":"A04000000000280",
					}]
				}], //销售订单--渲染
				SalesOrder1:[],//销售订单 -- 修改
				mask: false, //协议
				Amount: 0,
				DeliveryAmount: 0,
				Sales_Amount: 0,
				distance: 0,
				Quantity: 0,
				Article_Name: [],
				times: "",
				sales_orders: [],
				sales_order: {
					Sales_Order_SerialNumber: "",
					Store_SerialNumber: "",
					Sales_Date: this.times,
					Open_ID: app.globalData.openid,
					Sales_Amount: "",
					Sales_Contacts: "",
					Sales_Phone: "",
					Sales_Address: "",
					Sales_Message: "",
					Collection_Amount: 0,
					Delivery_Amount: 0,
					Sales_ID: "xiaoshou1",
					Receive_Type: 0,
					Refund_Type: 0,
					App_ID: app.globalData.appid,
					Enterprise_Info_SerialNumber: app.globalData.enterprise,
					Children: {
						sales_order_detail: [{
							Sales_Order_Detail_SerialNumber: "",
							Sales_Order_SerialNumber: "",
							Sales_Unit_Price_Stock_SerialNumber: "",
							Article_SerialNumber: "",
							Sign: "无货货主",
							Quantity: "",
							Unit_Price: "",
							Sales_Unit_Price: "",
							Amount: "",
							Receive_Type: 0,
							Refund_Type: 0,
							Enterprise_Info_SerialNumber: app.globalData.enterprise,
							Article_Specifications_SerialNumber: "",
						}, ],
					},
				},
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
			};
		},
		onShow() {
			if (uni.getStorageSync("AddressData")) {
				//本地存储地址
				this.Address = uni.getStorageSync("AddressData");
				this.Getdistance(uni.getStorageSync("Store_SerialNumber"));
				if (this.count == 0) {
					this.sales_order.Sales_Address = this.Address.Address.replace(" ", "/")
						.replace(" ", "/")
						.replace(" ", "/");
				} else {
					this.sales_order.Sales_Address = "用户自提";
				}
				this.sales_order.Sales_Contacts = this.Address.Name;
				this.sales_order.Sales_Phone = this.Address.Phone;
				if (this.payway) {
					this.sales_orders.forEach((item) => {
						(item.Sales_Address = this.Address.Address.replace(" ", "/")
							.replace(" ", "/")
							.replace(" ", "/")),
						(item.Sales_Contacts = this.Address.Name);
						item.Sales_Phone = this.Address.Phone;
					});
				}
			}
			if (uni.getStorageSync("mask")) {
				//本地存储地址
				this.mask = false;
			} else {
				this.mask = true;
			}
		},
		onLoad(options) {
			this.fixed();
		},
		computed: {
			Price() {
				//补零
				return function(price) {
					if (price) {
						if (RegExp(/\./).exec(price)) {
							return price;
						} else {
							return price + ".00";
						}
					} else {
						return "";
					}
				};
			},
		},
		methods: {
			fixed() {//底部模块高度获取
				uni.createSelectorQuery().select("#fixed").boundingClientRect((res) => {
						this.fixedHeight = res.height + this.rpxToPx(20);
				}).exec();
			},
			handleDelivery(){//分配地址
				this.isShow3 = true;
				this.SalesOrder1 = this.SalesOrder
			},
			callback(arr){//地址分配后回传
				this.isShow3 = false;
				this.SalesOrder = arr
				//新地址
				if(arr.length==1){
					this.Address = arr[0].AddressData
				}
			},
			handlecount(i) {
				this.count = i;
				if (uni.getStorageSync("AddressData")) {
					if (i == 0) {
						this.sales_order.Sales_Address = this.Address.Address.replace(
								" ",
								"/"
							)
							.replace(" ", "/")
							.replace(" ", "/");
						this.sales_order.Delivery_Amount = this.DeliveryAmount;
					} else {
						this.sales_order.Sales_Address = "用户自提";
						this.sales_order.Delivery_Amount = 0;
					}
				}
			},
			Getdistance(Store_SerialNumber) {
				uni.request({
					//查询所选地址与发货点的距离
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					url: app.globalData.Domain_Name + "/WeChatAddressDistance", //销售价格单
					method: "POST",
					data: {
						latitude: this.Address.latitude,
						longitude: this.Address.longitude,
						Store_SerialNumber,
						Open_ID: app.globalData.openid,
					},
					success: ({
						data
					}) => {
						if (data.Data.length == 0 && data.EXIST) {
							uni.showToast({
								title: "该地址无法进行配送服务,请更换地址",
								icon: "none",
							});
							this.DeliveryAmount = 0;
							this.Sales_Amount = 0;
							this.distance = "";
							this.ispay = false;
						} else if (data.Data.length == 1 && data.EXIST) {
							this.ispay = true;
							this.DeliveryAmount = data.Data[0].Delivery_Amount;
							this.Sales_Amount = data.Data[0].Sales_Amount;
							this.distance = Number(data.Data[0].distance).toFixed(2);
							this.sales_order.Delivery_Amount = this.DeliveryAmount;
						}
					},
				});
			},
			agree() {
				//协议确认
				this.mask = false;
				uni.setStorageSync("mask", true);
				app.globalData.Rights_Type = "1";
			},
			submit() {
				//调起支付方式
				if (this.Address != null) {
					if (this.payway) {
						this.isShow2 = true;
						this.sales_orders.forEach((item, index) => {
							item.Sales_Message = this.SalesOrder[index].message;
							item.Delivery_Amount = this.count ? 0 : this.DeliveryAmount;
						});

						console.log(this.sales_orders);
					} else {
						this.isShow = true;
						this.sales_order.Sales_Message = this.SalesOrder[0].message;
					}
				} else {
					uni.showToast({
						title: "请选择地址",
						icon: "error",
					});
				}
			},
			handleClose(i) {
				//关闭支付关闭
				if(i=="address"){
					this.isShow3 = false;
					return;
				}
				if (this.payway) {
					this.isShow2 = false;
				} else {
					this.isShow = false;
				}
			},
			tags() {
				uni.showModal({
					title: "系统提示",
					content: "根据您选择送货的地址不同,配送费可能会发生变化(点击我已知晓后续将不再提示该提示)",
					confirmText: "我已知晓",
					success(res) {
						if (res.confirm) {
							uni.setStorageSync("tags", "1");
							uni.navigateTo({
								url: "/pages/my/address?Path=/pages/index/submitOrderOld",
							});
						}
					},
				});
			},
			onAddress() {
				//跳转到地址列表
				if (uni.getStorageSync("tags") == "" ? true : false) {
					this.tags();
				} else {
					uni.navigateTo({
						url: "/pages/my/address?Path=/pages/index/submitOrderOld",
					});
				}
			},
			rpxToPx(rpx) {
				//rpx转px
				const screenWidth = uni.getSystemInfoSync().screenWidth;
				return (screenWidth * Number.parseInt(rpx)) / 750;
			},
			accAdd(arg1, arg2) {
				//浮点型相加
				var r1, r2, m;
				try {
					r1 = arg1.toString().split(".")[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = arg2.toString().split(".")[1].length;
				} catch (e) {
					r2 = 0;
				}
				m = Math.pow(10, Math.max(r1, r2));
				return (arg1 * m + arg2 * m) / m;
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f9fa;
	}
	
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;

		.model_box {
			width: 80%;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			// z-index: 1000;
			background: #fff;
			// height:48%;
			border-radius: 15rpx;
		}

		.mb-content {
			padding: 10rpx 20rpx 10rpx 25rpx;
			box-sizing: border-box;
			height: 80%;
			overflow: scroll;
		}

		.mb-tit {
			padding: 15rpx 0rpx;
			box-sizing: border-box;
			font-size: 34rpx;
			text-align: center;
		}

		.mb-con {
			font-size: 30rpx;
			text-indent: 2rem;
			line-height: 1.5;
		}

		.mb-con1 {
			font-size: 30rpx;
			text-indent: 2rem;
			display: flex;

			.mb-a {
				// width: 180rpx;
				height: 40rpx;
				display: inline-block;
				padding: 0;
				margin: 0;
				color: #006df7;
				text-decoration: underline;
				text-indent: 0rem;
			}
		}

		.checkbox {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 11%;
		}

		.checkbox .qx {
			width: 50%;
			text-align: center;
			border-right: 1rpx solid #efefef;
		}

		.qr {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			box-szing: border-box;
			font-size: 30rpx;
			padding: 0;
			padding-right: 30rpx;

			.noUse {
				width: 50%;
				text-align: center;
				border-right: 1rpx solid #f3f3f3;
				color: #bbbbbb;
				padding-bottom: 15rpx;
			}

			.agree {
				width: 50%;
				text-align: center;
				font-size: 30rpx;
				color: #006df7;
				padding-bottom: 15rpx;
			}
		}
	}
</style>